<template>
  <a-card :bordered="false" v-if="!show">
    <module-search ref="search" @search="handleSearch" @add="handleAdd"></module-search>
    <module-table ref="table" @update="handleUpdate" />
  </a-card>
  <!-- <bpmn-generator ref="form" v-else :id="id" :sourceId="sourceId" @save="handleSave"></bpmn-generator> -->
</template>

<script>
import ModuleSearch from './search'
import ModuleTable from './table'
// import BpmnGenerator from '@/components/Bpmn';

export default {
  name: 'Bpmn',
  components: {
    ModuleTable,
    ModuleSearch
    // BpmnGenerator
  },
  provide() {
    return {
      backList: function() {
        this.show = false
      }.bind(this)
    }
  },
  data() {
    return {
      show: false,
      id: null,
      sourceId: null
    }
  },
  methods: {
    handleSearch(query) {
      this.$refs.table.handleLoadData(query)
    },
    handleAdd() {
      this.id = null
      this.sourceId = null
      this.show = true
    },
    handleUpdate(row) {
      this.id = row.id
      this.sourceId = row.editorSourceValueId
      this.show = true
    },
    handleSave() {
      this.show = false
      this.$nextTick(() => {
        this.$refs.table.handleLoadData()
      })
    }
  }
}
</script>
